<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置自我介绍</title>
		<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />
		<link href="../Common/css/mui.css" rel="stylesheet" />
		<link href="../Common/css/ufun.css" type="text/css" rel="stylesheet" />
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
		<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
		<script src="../Common/js/mui.js"></script>
		<style type="text/css">	
			body {
				font-family: "Source Han Sans CN";
				background-color: #fff;
				overflow-x: hidden;
				overflow-y: hidden;
			}
			
			#bgc {
				width: 100%;
				height: 100%;
				/* z-index: -1; */
				position: fixed;
				top: 0;
			}

			.profile-picture {
				text-align: center;
				margin: 20vw auto 0 auto;
			}

			@-webkit-keyframes fadeInOut {
				0% {
					opacity: 0;
					width: 0%;
				}

				50% {
					opacity: 1;
					width: 75%;
				}

				75% {
					opacity: 1;
					width: 100%;
				}
			}

			.profile-picture {
				-webkit-animation-name: fadeInOut;
				-webkit-animation-timing-function: ease-in-out;
				-webkit-animation-iteration-count: 1;
				-webkit-animation-duration: 3s;
				-webkit-animation-direction: alternate;
			}

			@-webkit-keyframes fadeInOut {
				0% {
					opacity: 0;
					width: 0%;
				}

				50% {
					opacity: 1;
					width: 80%;
				}
			}

			#inpt,
			.set-btn,
			.profile-steps {
				-webkit-animation-name: fadeInOut;
				-webkit-animation-timing-function: ease-in-out;
				-webkit-animation-iteration-count: 1;
				-webkit-animation-duration: 3s;
				-webkit-animation-direction: alternate;
			}

			.main-title {
				text-align: center;
				margin-top: 18vw;
			}

			.main-title a {
				color: #4B4A48;
				font-size: 5vw;
			}

			.profile-picture img {
				width: 60vw;
			}

			#inpt {
				text-align: center;
				float: none;
				text-align: center;
				width: 80%;
				color: var(--color-gray-light);
				resize: none;
			}


			.col {
				margin: 10vw auto 0 auto;
				resize: none;
			}

			.set-btn-container {
				margin: 5.8vw auto 0vh auto;
				text-align: center;
				align-items: center;
			}

			.set-btn-container button {
				color: #fff;
				align-items: center;
			}

			.set-btn {
				width: 80%;
				height: 11vw;
				background: #f67575 !important;
				box-shadow: none !important;
				border-radius: 9.6vw;
				border-style: none;
				color: #4b4a48;
				font-size: 3vw;
				margin-top: 6vw;
				box-shadow: none;
				align-items: center;
			}


			/* label color */
			.input-field label {
				color: var(--color-gray-light);
			}

			.input-field i {
				color: var(--color-gray-light);
			}

			/* icon prefix focus color */
			.input-field .prefix.active {
				color: #f67575;
			}

			.input-field textarea:focus {
				border-bottom: 1px solid #f67575 !important;
				box-shadow: 0 1px 0 0 #f67575 !important;
			}

			.input-field label.active {
				color: #f67575 !important;
			}

			.link-area {
				display: block;
				margin-top: 4vw;
				text-align: center;
				align-items: center;
			}

			.link-area a {
				color: var(--color-gray-light);
				font-size: 3vw;
				font-weight: 200;
			}

			.profile-steps {
				text-align: center;
				align-items: center;
				width: 80%;
				margin: 2vws auto 0 auto;
				display: flex;

			}

			.profile-steps div {
				text-align: center;
				margin: 2vw auto 2vw auto;
			}


			#Step1 {
				background: var(--color-gray-light);
				width: 8vw;
				height: 2vw;
				-moz-border-radius: 30vw;
				-webkit-border-radius: 30vw;
				border-radius: 30vw;
				margin-left: 20vw;

			}

			#Step2 {
				background: var(--color-gray-light);
				width: 8vw;
				height: 2vw;
				-moz-border-radius: 30vw;
				-webkit-border-radius: 30vw;
				border-radius: 30vw;

			}

			#Step3 {
				background: #f67575;
				width: 8vw;
				height: 2vw;
				-moz-border-radius: 30vw;
				-webkit-border-radius: 30vw;
				border-radius: 30vw;
				margin-right: 20vw;
			}

			.line-spliter {
				color: #f67575;
				padding: 0vh 2vw;
			}


			.materialize-textarea {
				max-height: 30vw;
				overflow-y: scroll;
			}
		</style>

	</head>
	<body>
		<img src="img/profile-background.png" id="bgc">
		<div class="profile-picture">
			<img src="img/pic-set-profile.svg">
		</div>

		<div class="main-title">
			<a>做个自我介绍吧</a>
		</div>

		<div class="row">
			<form class="col s12">
				<div class="row">
					<div class="input-field col s6" id="inpt">
						<textarea name="user_name" id="icon_prefix2" class="materialize-textarea" data-length="200" maxlength="200"
						 placeholder="双学位博士balabalabala"></textarea>
						<label for="icon_prefix2" id="namelable">输入自我介绍</label>
					</div>
				</div>
			</form>
		</div>

		<form class="set-btn-container" method="get" onsubmit="isTextAreaNull()" action="welcome-page.html">
			<button type="submit" class="set-btn">完成</button>
		</form>

		<div class="profile-steps">
			<div id="Step1"></div>
			<div id="Step2"></div>
			<div id="Step3"></div>
		</div>

		<div class="mui-content-padded">
			<div class="link-area">
				<a id="Reg" href="set-school.html">返回</a>

				<span class="line-spliter">|</span>
				<a id="ForgetPassword" href="welcome-page.html">跳过</a>
			</div>
		</div>

	</body>
	<script type="text/javascript">
		var originalHeight = document.documentElement.clientHeight || document.body.clientHeight;
		var originalWidth = document.documentElement.clientWidth || document.body.clientWidth;
		var bgc = document.getElementById("bgc");
		bgc.style.width = originalWidth + "px";
		bgc.style.height = originalHeight + "px";
		var captGotten = 0;
		
		//监测输入内容的字数
		document.addEventListener("DOMContentLoaded", function() {
			const counter = document.querySelectorAll("textarea#icon_prefix2");
			M.CharacterCounter.init(counter);
		})
	</script>

</html>
